<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>

    <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
</head>

<body>
    <div id="top">
        <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>
    </div>

    <div id="left">
        <%@include file="/WEB-INF/jsp/common/component/userMessage.jsp"%>
        <%@include file="/WEB-INF/jsp/common/component/menu.jsp"%>
    </div><!-- /#left -->

    <div id="wrap">
        <div class="content" >
            <div class="inner">

                <div id="toolbar" class="btn-group">
                    <a id="addBtn" href="${ctx}/admin/create" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </a>
                </div>

                <table id="table">
                </table>
            </div>
        </div><!-- /#content -->
        <%@include file="/WEB-INF/jsp/common/component/footer.jsp"%>
    </div><!-- /#wrap -->
    <%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>

    <script>

        function deleteFun(id){
            swAjax({
                title: "删除",
                text: "您确定要删除该管理员吗?",
                callback: function(){
                    $.ajax({
                        url: path + "/admin/delete",
                        type: "post",
                        dataType: "json",
                        data:{
                            id: id
                        },
                        success: function(data){
                            if(data.success){
                                successMessage("操作成功", function(){
                                    table.bootstrapTable('refresh');
                                });
                            } else{
                                errorMessage("操作失败！请重试");
                            }
                        }
                    });
                }
            });
        }

        function actionFormatter(value, row, index){
            var res = "";
            res += "<a href='" + path + "/admin/resetPassword?id="+ row.id + "' class='btn btn-info btn-sm'>重置密码</a> &nbsp;&nbsp;";

            res += "<button onclick='deleteFun(\"" + row.id + "\")' type='button' class='btn btn-danger btn-sm'>删除" + "</button> &nbsp;&nbsp;";
            return res;
        }

        var table = $('#table');

        $(document).ready(function(){
            var filter = null;

            table.bootstrapTable({
                //定义列
                columns: [
                    {field: 'checkbox', title:'', checkbox: true},
                    {field: 'id', title: '', visible: false},
                    {field: 'username', title: '用户名', titleTooltip: "用户名"},
                    {field: 'action', title: '操作',titleTooltip: "操作", formatter: actionFormatter}
                ],
                url: '${ctx}/admin/pageData',    //A URL to request data from remote site.
                method: 'get',           //	The method type to request remote data.
                contentType: 'application/json',  //The contentType of request remote data.
                dataType: 'json',            //希望服务器返回的数据类型
                sidePagination: 'server',   //设置为服务器分页
                toolbar: '#toolbar',        //工具按钮用哪个容器
                queryParams: function(params){
                    return {
                        page: params.pageNumber,
                        pageSize: params.pageSize,
                        filter: hasData(filter) ? JSON.stringify(filter) : null,
                        sortName: params.sortName,
                        sortOrder: params.sortOrder
                    };
                },

                queryParamsType: '',   //Set 'limit' to send query params width RESTFul type.

                responseHandler: function(data) {
                    var res = data.dataObj;
                    return {
                        "rows": res,
                        "total": data.total
                    };
                },
                striped: true,           //表格加上条纹，默认为 false
                pagination: true,       //是否展示页脚，默认为 false
                selectItemName: "btn",  //The name of radio or checkbox input.
                showRefresh: true,        //刷新按钮
                showToggle: true,            //切换表格风格：列表/卡片
                idField: 'id',               //指明那一列是主键
                clickToSelect: true,
                valign: "middle",
                paginationDetailHAlign: 'right',    //页码字显示的位置,left/right
                checkboxHeader: false,            //设为 false，则没有选中全部的 checkbox 按钮
                singleSelect: true             //设置 checkbox 仅能选中一行
            });

        });
    </script>
</body>

</html>